import React from 'react';
import { Modal, Form, Input, Select } from 'antd';
import { CodeEditor } from '../../../../components/common';

const FormItem = Form.Item;
const TextArea = Input.TextArea;
const Option = Select.Option;
const formItemLayout = {
  labelCol: {
    span: 5,
  },
  wrapperCol: {
    span: 18,
  },
};

class ContentModal extends React.Component {
  state = {
    type: 'sql',
  };
  handleOk = () => {
    const { handleAdd, form: { validateFields, getFieldsValue } } = this.props;
    validateFields((errors) => {
      if (errors) {
        return;
      }
      const data = getFieldsValue();
      if (data.type === 'sql') {
        delete data.esQuery;
      } else {
        delete data.dbName;
        delete data.sql;
      }
      handleAdd(data, this.handleCancel);
    });
  };
  handleCancel = () => {
    const { form: { resetFields }, handleCancel } = this.props;
    handleCancel();
    resetFields();
    this.setState({
      type: 'sql',
    });
  };
  handleTypeChange = (value) => {
    this.setState({
      type: value,
    });
  };
  render() {
    const {
      loading,
      visible,
      db,
      form: { getFieldDecorator },
    } = this.props;
    const modalProps = {
      title: '新增配置内容',
      visible,
      onOk: this.handleOk,
      onCancel: this.handleCancel,
      wrapClassName: 'vertical-center-modal',
      confirmLoading: loading,
      maskClosable: false,
    };
    return (
      <Modal {...modalProps}>
        <Form>
          <FormItem
            key="1"
            label="指标项类型"
            {...formItemLayout}
          >
            {getFieldDecorator('type', {
              initialValue: 'sql',
              rules: [
                {
                  required: true,
                  message: '请选择指标项类型',
                },
              ],
            })(
              <Select onChange={this.handleTypeChange}>
                <Option key="1" value="sql">SQL</Option>
                <Option key="2" value="es">ES</Option>
              </Select>
            )}
          </FormItem>
          <FormItem
            key="2"
            label="指标项名称"
            {...formItemLayout}
          >
            {getFieldDecorator('name', {
              initialValue: '',
              rules: [
                {
                  required: true,
                  message: '请输入指标项名称',
                },
              ],
            })(<Input />)}
          </FormItem>
          {
            this.state.type === 'sql' ?
            [
              <FormItem
                key="3"
                label="数据源"
                {...formItemLayout}
              >
                {getFieldDecorator('dbName', {
                  initialValue: '',
                  rules: [
                    {
                      required: true,
                      message: '请选择一个数据源',
                    },
                  ],
                })(
                  <Select
                    onChange={this.handleSourceIdChange}
                    showSearch
                    optionFilterProp="children"
                    filterOption={
                      (input, option) =>
                        option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                    }
                  >
                    <Option key={-1} value="">请选择</Option>
                    {
                      db.map((item, index) => {
                        return (
                          <Option
                            key={index}
                            value={`${item.name}`}
                          >
                            {`${item.name} [${item.dbType}]`}
                          </Option>
                        );
                      })
                    }
                  </Select>
                )}
              </FormItem>,
              <FormItem
                key="4"
                label="SQL"
                {...formItemLayout}
              >
                {getFieldDecorator('sql', {
                  initialValue: '',
                  rules: [
                    {
                      required: true,
                      message: '请输入SQL',
                    },
                  ],
                })(<CodeEditor options={{ lineNumbers: true, mode: 'text/x-sql'}}/>)}
              </FormItem>
            ] :
            (
              <FormItem
                key="5"
                label="ES表达式"
                {...formItemLayout}
              >
                {getFieldDecorator('esQuery', {
                  initialValue: '',
                  rules: [],
                })(
                  <TextArea rows="3" />
                )}
              </FormItem>
            )
          }
        </Form>
      </Modal>
    );
  }
}

export default Form.create()(ContentModal);
